<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
        }

        p {
            border: 1px solid #000;
            padding: 10px;
        }
    </style>
</head>

<body>

    <div>
        <p>50</p>
        <p>
            <span class="reduce">-</span>
            <input type="text" value="2">
            <span class="add">+</span>
        </p>
        <p>100</p>
    </div>

    <div>
        <p>50</p>
        <p>
            <span class="reduce">-</span>
            <input type="text" value="2">
            <span class="add">+</span>
        </p>
        <p>100</p>
    </div>

    <script>

        // 数量+
        var oAdds = document.querySelectorAll('.add');
        for (var i = 0; i < oAdds.length; i++) {
            oAdds[i].onclick = function () {
                this.previousElementSibling.value++;
                // 小计 = 数量 * 单价
                this.parentElement.nextElementSibling.innerHTML = this.previousElementSibling.value * this.parentElement.previousElementSibling.innerHTML;
            }
        }

        // 数量-
        var oReduces = document.querySelectorAll('.reduce');
        for (var i = 0; i < oReduces.length; i++) {
            oReduces[i].onclick = function () {
                if (this.nextElementSibling.value == 1) {
                    return
                }
                this.nextElementSibling.value--;
                // 小计 = 数量 * 单价
                this.parentElement.nextElementSibling.innerHTML = this.nextElementSibling.value * this.parentElement.previousElementSibling.innerHTML;
            }
        }

    </script>

</body>

</html>